<!--由我审核的-->
<template>
  <pure-table
    ref="pureTable"
    :columns="columns"
    :list-api="listApi"
    :query-condition="queryCondition"
  >
    <template #header>
      <query-panel
        @query="onQuery"
        @reset="onReset"
      >
        <el-form-item>
          <el-input
            v-model="form.keywords"
            placeholder="故障描述/工单号/报修电话"
          />
        </el-form-item>

        <el-form-item v-if="showToBeReviewed">
          <el-date-picker
            v-model="form.time"
            end-placeholder="报修结束日期"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="报修开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item v-if="showToBeReviewed || showReviewed">
          <el-date-picker

            v-model="form.completeTime"
            end-placeholder="完成结束日期"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="完成开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item v-if="showReviewed">
          <el-date-picker
            v-model="form.reviewedTime"
            end-placeholder="审核结束日期"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="审核开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item v-if="showToBeReviewed">
          <el-input
            v-model="form.makeUserId"
            placeholder="处理人"
          />

        </el-form-item>
        <el-form-item v-if="showToBeReviewed">
          <el-input
            v-model="form.departmentId"
            placeholder="报修院区/科室"
          />

        </el-form-item>
        <el-form-item v-if="showToBeReviewed">
          <el-select
            v-model="form.faultType"
            clearable
            placeholder="故障分类"
          >
            <el-option
              label="区域一"
              value="shanghai"
            />
            <el-option
              label="区域二"
              value="beijing"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="showReviewed">
          <el-select
            v-model="form.processValue"
            clearable
            placeholder="审核状态"
          >
            <el-option
              label="通过"
              value="end_examine"
            />
            <el-option
              label="驳回"
              value="no_examine"
            />
          </el-select>
        </el-form-item>

        <template #extra>
          <el-radio-group
            v-model="handleType"
            size="small"
            @change="changeHandleType"
          >
            <el-radio-button label="待审核" />
            <el-radio-button label="已审核" />
          </el-radio-group>
        </template>
      </query-panel>

    </template>

    <template #columns="{row, prop}">
      {{ row[prop] || '-' }}
    </template>

    <template #operationColumn="{row}">
      <template v-if="handleType ==='待审核'">
        <pure-button
          label="通过"
          type="text"
          @click="onConfirm(row)"
        />
        <pure-button
          label="驳回"
          text-color="warning"
          type="text"
          @click="onReject(row)"
        />
      </template>

    </template>
  </pure-table>

</template>

<script>
import QueryPanel from '@/common/components/query/queryPanel.vue';
import MyReviewedApi from './api';
import { debounce, } from 'lodash-es';
import DialogReject from './dialog/reject.vue';

export default {
  name: 'MyReviewed',
  components: {
    QueryPanel,
  },
  data() {
    return {
      listApi: null,
      handleType: '待审核',
      form: {
        // 完成结束时间(yyyy-MM-dd)
        completeEndTime: '',
        // 完成开始时间(yyyy-MM-dd)
        completeStartTime: '',
        // 科室ID
        departmentId: '',
        // 报修结束时间(yyyy-MM-dd)
        endTime: '',
        // 故障分类
        faultType: '',
        // 关键字
        keywords: '',
        // 处理人Id
        makeUserId: '',
        // 报修开始时间(yyyy-MM-dd）
        startTime: '',
        time: [],
        completeTime: [],
        //   审核时间
        reviewedTime: [],
      },
      queryCondition: {},
      columns: [],
      // 待审核表格数据
      pendingColumns: [{
        label: '故障描述',
        prop: 'faultRemark',

      }, {
        label: '工单号',
        prop: 'orderNum',
      }, {
        label: '报修院区/科室',
        prop: 'deptName',
      },
      {
        label: '故障分类',
        prop: 'faultType',
      },
      {
        label: '报修电话',
        prop: 'phone',
      },
      {
        label: '报修人',
        prop: 'user',
      },
      {
        label: '报修时间',
        prop: 'createTime',
      },
      {
        label: '处理人',
        prop: 'makeUser',
      },
      {
        label: '完成时间',
        prop: 'completeDate',
      },
      ],
      //   已处理表格
      processedColumns: [
        {
          label: '故障描述',
          prop: 'faultRemark',
        },
        {
          label: '审核状态',
          prop: 'processValue',
        },
        {
          label: '审核时间',
          prop: 'reviewTime',
        },
        {
          label: '工单号',
          prop: 'orderNum',
        },
        {
          label: '处理人',
          prop: 'makeUser',
        },
        {
          label: '完成时间',
          prop: 'completeDate',
        },

      ],

    };
  },
  computed: {
    //  待审核
    showToBeReviewed() {
      return this.handleType === '待审核';
    },
    //  已审核
    showReviewed() {
      return this.handleType === '已审核';
    },
  },
  created() {
    this.listApi = MyReviewedApi.getMyToBeReviewedList;
    this.columns = this.pendingColumns;
    // this.debounce = debounce;
  },
  methods: {
    changeHandleType: debounce(function (val) {
      this.handleType = val;
      if (val === '待审核') {
        this.columns = this.pendingColumns;
        this.listApi = MyReviewedApi.getMyToBeReviewedList;
      } else {
        this.listApi = MyReviewedApi.getMyReviewedList;
        this.columns = this.processedColumns;
      }
      // 此处处理切换tab时，表格数据出现异步的问题
      setTimeout(() => {
        this.$refs.pureTable.fetchData();
      }, 100);
    }, 300),
    onReset() {
      this.queryCondition = {};
      this.form = {
        completeEndTime: '',
        completeStartTime: '',
        departmentId: '',
        endTime: '',
        faultType: '',
        keywords: '',
        makeUserId: '',
        startTime: '',
        time: [],
        completeTime: [],
        reviewedTime: [],
      };
    },
    onQuery() {
      this.queryCondition = {
        ...this.form,
      };
      this.queryCondition.completeStartTime = this.form.completeTime[0];
      this.queryCondition.completeStartTime = this.form.completeTime[1];
      this.queryCondition.examineStartTime = this.form.reviewedTime[0];
      this.queryCondition.examineEndTime = this.form.reviewedTime[1];

      this.queryCondition.startTime = this.form.time[0];
      this.queryCondition.endTime = this.form.time[1];
    },
    onReject(row) {
      this.$dialog({
        component: () => <DialogReject orderNum={row.orderNum}/>,
      });
    },
    async onConfirm(row) {
      const res = await MyReviewedApi.pass(row.orderNum);
      if (res.code === 200) {
        this.$message.success('通过成功');
        this.$refs.pureTable.fetchData();
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>

<style lang='scss'
  scoped
>

</style>
